<template>
    <!-- v-model 改为v-show 就显示不出来 -->
    <Modal v-model="showModal" width="800" draggable @on-cancel="rightClose">
        <p slot="header" style="color:#f60;text-align:center">
            <span>添加站点</span>
        </p>
        <div >
            <Form ref="site" :model="site" :rules="site_rules" label-position="left"  :label-width="100">
                <Form-Item label="选择环境" prop="env">
                    <Select v-model="site.env">
                        <Option v-for="env in env_list" :key="env" :value="env">{{ env }}</Option>
                    </Select>
                </Form-Item> 
                <Form-Item label="名字:"  prop="name">
                    <Input type="text"  v-model="site.name" />
                </Form-Item> 
                <Form-Item label="链接:"  prop="link">
                        <Input type="text"  v-model="site.link" />
                </Form-Item> 
                <Form-Item label="账号:"  prop="account">
                    <Input type="text"  v-model="site.account" />
                </Form-Item> 
                <Form-Item label="密码:"  prop="password">
                        <Input type="text"  v-model="site.password" />
                </Form-Item> 
                <Form-Item label="描述:"  prop="description">
                    <Input type="textarea"  :rows="10" style="overflow-y:auto"  v-model="site.description" />
                </Form-Item> 
            </Form> 
        </div>
        <div slot="footer">
            <!-- site是 ref的值 -->
            <Button type="primary" size="large"  @click="submit_add_site('site')">提交</Button>
        </div>
    </Modal>
</template>
<script>
import { post } from  '@/api/http'
import {
    site_add,
    get_env_name_list,
    get_site_by_env_name,
} from '@/api';
import axios from 'axios';

export default ({
    name: 'addSiteModal',
    props: {
        isShow: {
            type: Boolean
        },
        site: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    data() {
        return {
            showModal: false,
            env_list: [],
            site_rules: {
                name:[
                    {required: true,message:"请输入站点名称",trigger: 'blur'},
                ],
                link:[
                    {required: true,message:"请输入站点链接地址",trigger: 'blur'},
                ],
            },
        }
    },
    methods: {
        rightClose() {
            console.log('右上角的关闭，Son组件自己改变了ShowModal的状态')
            //一些和业务相关的代码
            //更新父组件的状态
            this.$emit('closeModal')
        } , 
        // 获取环境列表
        get_env(){
            post(get_env_name_list).then(response =>{
                this.env_list = response.data
            })
        }, 
        init(){
            this.get_env()
        },
        async checkUnique(site) {
            let site_name=site.name
            let env = site.env
            let data = {'name':site_name,'env':env}
            let response = await axios({
                method: 'post',
                url: get_site_by_env_name,
                data: data
            })
            let info = response.data
            if(info.msg == true) {
                console.log("非唯一，不可插")
                return false
            }else {
                console.log("可插")
                return true
            } 
        },
        async submit_add_site(name){
            let validate = false
            this.$refs[name].validate((valid) => {
                if (valid) validate = true
            })
            if(!validate) return
            let site = this.site
            // 判断联合主键  axios真麻烦 异步得改同步
            let checkPass  = await this.checkUnique(site)
            if(!checkPass){
                this.$Message.error(site.env+" "+site.name+" 已经存在")
                return   
            }
            let data = {'site':site}
            post(site_add,data).then( (response) => {
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('添加'+site.name+'成功')
                    this.$emit('addSuccess')
                    this.$emit('closeModal')
                    // this.refresh()
                }else {
                    alert("添加失败:",info)
                }
            })

        },
    },
    mounted() {
        // 先执行子组件的mounted,才会执行父组件的mounted
        this.init()
    },
    watch: {
        isShow(newVal,oldVal) {
            console.log("监听到isShow变化"+newVal,oldVal)
            this.showModal = newVal
        }
    }
})
</script>
